<script setup lang="ts">
import { computed } from 'vue'
import { tabbarStore } from './tabbar'
import { adminTabBarList, commonTabBarList, userTabBarList } from './tabbarList'
import { useUserStore } from '@/store/user'
import { useTabbarSync } from '@/hooks/useTabbarSync'

const userStore = useUserStore()
const { initTabbarSync, handleTabbarSelect } = useTabbarSync()

// 根据角色动态计算要显示的列表
const tabbarList = computed(() => {
  debugger
  let _list = []
  if (userStore.role === 'user') {
    _list = userTabBarList
  }
  else {
    _list = adminTabBarList
  }
  _list = [..._list, ...commonTabBarList]
  console.log(_list, userStore.role, 'tabbarList')
  return _list
})

// 初始化tabbar同步功能
initTabbarSync(tabbarList)

// tabbar 切换事件
function selectTabBar({ value: index }: { value: number }) {
  handleTabbarSelect(index, tabbarList.value)
}
</script>

<template>
  <wd-tabbar
    v-if="tabbarList.length > 0"
    v-model="tabbarStore.curIdx"
    bordered
    safe-area-inset-bottom
    placeholder
    fixed
    @change="selectTabBar"
  >
    <block v-for="(item, idx) in tabbarList" :key="userStore.role + item.pagePath">
      <wd-tabbar-item v-if="item.iconType === 'uiLib'" :title="item.text" :icon="item.icon" />
      <wd-tabbar-item
        v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
        :title="item.text"
      >
        <template #icon>
          <view
            h-40rpx
            w-40rpx
            :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
          />
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
        <template #icon>
          <image :src="item.icon" h-40rpx w-40rpx />
        </template>
      </wd-tabbar-item>
    </block>
  </wd-tabbar>
</template>
